<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var box = document.querySelector("#box")

    // 赋值式
    // box.onclick = function(){
    //     console.log(1);
    // }
    // box.onclick = function(){
    //     console.log(2);
    // }
    // box.onclick = null;

    // 监听式
    // 绑定
    box.addEventListener("click", fn1 );
    box.addEventListener("click", fn2 );
    box.addEventListener("click", fn3 );
    // 删除
    box.removeEventListener("click", fn2);
    box.removeEventListener("click", fn1);
    box.removeEventListener("click", fn3);

    // console.log( box.addEventListener );

    // 事件监听式绑定事件的兼容处理
    // if(box.attachEvent){
    //     // 如果不是undefined，执行正在判断的方法
    //     console.log( box.attachEvent );
    // }else{
    //     // 如果是undefined，执行另一个
    //     console.log( box.addEventListener );
    // }

    // console.log( box.attachEvent );
    // box.attachEvent("onclick", fn1);
    


    function fn1(){
        console.log(1)
    }
    function fn2(){
        console.log(2)
    }
    function fn3(){
        console.log(3)
    }
</script>
</html>